<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </Back>
    </div>
    <div class="form-content">
      <div class="form-box" style="width: 60%;">
        <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">

          <el-form-item label="名称" prop="name" required>
            <el-input v-model="form.name" placeholder="请输入名称" clearable />
          </el-form-item>
          <el-form-item label="跳转链接" prop="url" required>
            <el-input v-model="form.url" placeholder="请输入名称" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="state" required>
            <el-radio-group v-model="form.state">
              <el-radio :value="1" border>启用</el-radio>
              <el-radio :value="2" border>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否激活" prop="act" required>
            <el-radio-group v-model="form.act">
              <el-radio :value="1" border>激活</el-radio>
              <el-radio :value="2" border>未激活</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort" required>
            <el-input v-model="form.sort" placeholder="请输入排序序号" clearable />
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>
<script setup name="MallDocDetail">
const { proxy } = getCurrentInstance()
const formRef = ref();
const form = reactive({ id: '', name: '', url: '', state: 1, act: 1, sort: '' });
//验证规则
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
};
//保存
async function save() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = await proxy.$post('MallHotwordsSave', form)
      if (res.code === 0) {
        ElMessage({ type: 'success', message: '保存成功' });
        proxy.$bus.emit('back');
      }
    }
  });
}

onMounted(() => {
  // 编辑
  let id = proxy.$route.query.id || null;
  if (id) {
    getDetail(id)
  } else {
    show_eidt.value = true
  }
});
const show_eidt = ref(false)
async function getDetail(id) {
  let res = await proxy.$post('MallHotwordsDetail', {
    id
  }, false)
  if (res.code === 0) {
    Object.assign(form, res.data);
  }
  show_eidt.value = true
}

</script>
<style scoped lang="scss"></style>
